<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
	<HEAD>
		<META CONTENT="text/html; charset=UTF-8" HTTP-EQUIV="Content-Type">
		<TITLE>PI.JS > pi.xhr</TITLE>
		<LINK HREF="../../../inc/template.css" REL="stylesheet">
		<LINK HREF="../../../inc/template.css" REL="stylesheet">
		<SCRIPT SRC="../../../source/pi.1.1.1.js" TYPE="text/javascript"></SCRIPT>
		<SCRIPT SRC="../../../inc/template.js" TYPE="text/javascript"></SCRIPT>
		<LINK HREF="../../../inc/sh/SyntaxHighlighter.css" TYPE="text/css" REL="stylesheet">
		<SCRIPT SRC="../../../inc/sh/shCore.js" LANGUAGE="javascript"></SCRIPT>
		<SCRIPT SRC="../../../inc/sh/shBrushJScript.js" LANGUAGE="javascript"></SCRIPT>
		<SCRIPT SRC="../../../inc/sh/shBrushCss.js" LANGUAGE="javascript"></SCRIPT>
		<SCRIPT SRC="../../../inc/sh/shBrushXml.js" LANGUAGE="javascript"></SCRIPT>
		<SCRIPT SRC="../../../inc/sh/shBrushPhp.js" LANGUAGE="javascript"></SCRIPT>
		<SCRIPT SRC="../../../inc/sh/shBrushPython.js" LANGUAGE="javascript"></SCRIPT>
	</HEAD>
	<BODY>
		<A HREF="/" ID="header" CLASS="Header">
			<EM></EM>
		</A>
		<DIV CLASS="Index">
			<DIV ID="indexContainer" CLASS="ListContainer">
				<A HREF="../../../index.html" CLASS="Button "><EM>About Pi</EM></A>
				<A HREF="../../../pages/Downloads" CLASS="Button "><EM>Downloads</EM></A>
				<A HREF="../../../documentation/index.html" CLASS="Button SelectedButton"><EM>Documentation</EM></A>
				<DIV CLASS="SubNavigation">
					<DIV>
						<H2 CLASS="Title">Essential Documents</H2>
						<UL>
							<LI>
								<A STYLE="" HREF="../../../documentation/essential/Getting Started to pi.js/">Getting Started to pi.js</A>
							</LI><LI>
								<A STYLE="" HREF="../../../documentation/essential/Object Oriented Programming with pi.js/">Object Oriented Programming with pi.js</A>
							</LI>
						</UL>
					</DIV><DIV>
						<H2 CLASS="Title">Reference</H2>
						<UL>
							<LI>
								<A STYLE="" HREF="../../../documentation/env/pi.env/">pi.env</A>
							</LI><LI>
								<A STYLE="" HREF="../../../documentation/get/pi.get/">pi.get</A>
							</LI><LI>
								<A STYLE="font-weight:bold" HREF="../../../documentation/util/pi.util/">pi.util</A>
								<UL>
									<LI>
										<A HREF="../../../documentation/util/pi.util.Array/">pi.util.Array</A>
									</LI><LI>
										<A HREF="../../../documentation/util/pi.util.Element/">pi.util.Element</A>
									</LI><LI>
										<A HREF="../../../documentation/util/pi.util.Hash/">pi.util.Hash</A>
									</LI><LI>
										<A HREF="../../../documentation/util/pi.util.Number/">pi.util.Number</A>
									</LI><LI>
										<A HREF="../../../documentation/util/pi.util.String/">pi.util.String</A>
									</LI>
								</UL>
							</LI><LI>
								<A STYLE="" HREF="../../../documentation/base/pi.base/">pi.base</A>
							</LI><LI>
								<A STYLE="" HREF="../../../documentation/element/pi.element/">pi.element</A>
							</LI><LI>
								<A STYLE="" HREF="../../../documentation/xhr/pi.xhr/">pi.xhr</A>
							</LI><LI>
								<SPAN STYLE="font-weight:bold">Native Objects</SPAN>
								<UL>
									<LI>
										<A HREF="../../../documentation/Native Objects/Array/">Array</A>
									</LI><LI>
										<A HREF="../../../documentation/Native Objects/Function/">Function</A>
									</LI><LI>
										<A HREF="../../../documentation/Native Objects/Number/">Number</A>
									</LI><LI>
										<A HREF="../../../documentation/Native Objects/String/">String</A>
									</LI>
								</UL>
							</LI><LI>
								<SPAN STYLE="font-weight:bold">Plugins</SPAN>
								<UL>
									<LI>
										<A HREF="../../../documentation/plugin/pi.comet/">pi.comet</A>
									</LI><LI>
										<SPAN>pi.cache</SPAN>
									</LI><LI>
										<SPAN>pi.layer</SPAN>
									</LI><LI>
										<A HREF="../../../documentation/plugin/pi.storage/">pi.storage</A>
									</LI><LI>
										<SPAN>pi.win</SPAN>
									</LI>
								</UL>
							</LI>
						</UL>
					</DIV>
				</DIV>
				<A HREF="../../../pages/Plugins" CLASS="Button "><EM>Plugins</EM></A>
				<A HREF="http://groups.google.com/group/pi-js" CLASS="Button"><EM>Developer Forum</EM></A>
				<A HREF="http://code.google.com/p/pi-js/issues/list" CLASS="Button"><EM>Issues</EM></A>
			</DIV>
		</DIV>
		<!-- <h3 class="ContentNav" id="contentTitle">
			<div>
				<a class="Sel">index.html</a>
			</div>
		</h3>-->
		<DIV ID="documentationContent" CLASS="Content">
			<DIV CLASS="Pad">
				<H1 CLASS="Name">pi.xhr<EM CLASS="DocumentationTitleVersion">2009-01-06 09:23:29</EM></H1>
				<DIV>
				<H2 CLASS="Title">Summary</H2>
				A javascript class that provides to create ajax requests.
				</DIV>
				<DIV CLASS="Text">
					<H2 CLASS="Title">Syntax</H2>
<CODE>var foo = new pi.xhr(<EM>url</EM>);
foo.addData(<EM>key</EM>,<EM>value</EM>);
foo.environment.setType('POST');
foo.send();
</CODE>
<H2 CLASS="Title">Usage Example</H2>
<PRE NAME="code" CLASS="Js">
var foo = new pi.xhr("rss.php").addData("do","getNews").environment.setType('POST').send();
</PRE>
				</DIV>
				<DIV CLASS="PageListContainer">
					<DIV CLASS="Page">
						<H2 CLASS="Title">Properties</H2>
						<DIV CLASS="PageItem">
							<A HREF="Properties/api/" CLASS="PageItemTitle">api</A>
							<DIV CLASS="PageItemSummary">The XMLHttpRequest object that provides the transfer.</DIV>
						</DIV>
					</DIV><DIV CLASS="Page">
						<H2 CLASS="Title">Methods</H2>
						<DIV CLASS="PageItem">
							<A HREF="Methods/abort/" CLASS="PageItemTitle">abort</A>
							<DIV CLASS="PageItemSummary">Cancels the request.</DIV>
						</DIV><DIV CLASS="PageItem">
							<A HREF="Methods/addCallback/" CLASS="PageItemTitle">addCallback</A>
							<DIV CLASS="PageItemSummary">Pi will control the added value call-backs of the changing readyState values. The scope of the executed function is the object pi.xhr.</DIV>
						</DIV><DIV CLASS="PageItem">
							<A HREF="Methods/addData/" CLASS="PageItemTitle">addData</A>
							<DIV CLASS="PageItemSummary">Adds given data data to the request will be sent.</DIV>
						</DIV><DIV CLASS="PageItem">
							<A HREF="Methods/send/" CLASS="PageItemTitle">send</A>
							<DIV CLASS="PageItemSummary">Sends the request.</DIV>
						</DIV><DIV CLASS="PageItem">
							<A HREF="Methods/environment.setAsync/" CLASS="PageItemTitle">environment.setAsync</A>
							<DIV CLASS="PageItemSummary">It provides determining the request is asynchronous or not.</DIV>
						</DIV><DIV CLASS="PageItem">
							<A HREF="Methods/environment.getApi/" CLASS="PageItemTitle">environment.getApi</A>
							<DIV CLASS="PageItemSummary">Gets the XMLHttpRequest object.</DIV>
						</DIV><DIV CLASS="PageItem">
							<A HREF="Methods/environment.setApi/" CLASS="PageItemTitle">environment.setApi</A>
							<DIV CLASS="PageItemSummary">Sets the XMLHttpRequest object.</DIV>
						</DIV><DIV CLASS="PageItem">
							<A HREF="Methods/environment.setCache/" CLASS="PageItemTitle">environment.setCache</A>
							<DIV CLASS="PageItemSummary">Determines if the ForceCache parameter will be send.</DIV>
						</DIV><DIV CLASS="PageItem">
							<A HREF="Methods/environment.setType/" CLASS="PageItemTitle">environment.setType</A>
							<DIV CLASS="PageItemSummary">Determines the request type, GET or POST should be entered. If the request type is POST, pi.xhr sets the content type to "application/x-dom-event-stream".</DIV>
						</DIV>
					</DIV><DIV CLASS="Page">
						<H2 CLASS="Title">StaticMethods</H2>
						<DIV CLASS="PageItem">
							<A HREF="StaticMethods/get/" CLASS="PageItemTitle">get</A>
							<DIV CLASS="PageItemSummary">Sends a synchronic request and returns a XMLHttpRequest object.</DIV>
						</DIV>
					</DIV>
				</DIV>
				<DIV CLASS="Block">
					<H1>Examples</H1>
					<DIV CLASS="Example">
						<H1>Example #1: Get response from printUnixtime.php</H1>
							<DIV CLASS="View">
								<DIV ID="time"></DIV><SCRIPT SRC="getUnixtime.js" TYPE="text/javascript"></SCRIPT>
							</DIV>
							<H2>Source files of the above example:</H2>
							<DIV>
								<H3>getUnixtime.html</H3>
								<PRE NAME="code" CLASS="html">&lt;div id="time">&lt;/div></PRE>
							</DIV><DIV>
								<H3>getUnixtime.js</H3>
								<PRE NAME="code" CLASS="js">var req = new pi.xhr("unixtime.php");
req.environment.addCallback([4],function(){
	pi.get("time").innerHTML=this.api.responseText;
});
req.send();</PRE>
							</DIV>
							<DIV>
								<DIV>
									<H3>unixtime.php</H3>
									<PRE NAME="code" CLASS="php">&lt;? print time(); ?></PRE>
								</DIV>
							</DIV>
					</DIV><DIV CLASS="Example">
						<H1>Example #2: Post a form data to a serverside script.</H1>
							<DIV CLASS="View">
								<LABEL>Name:</LABEL><INPUT ID="i_name" NAME="name"><BR>
<LABEL>Age:</LABEL><INPUT ID="i_age" NAME="age"><BR>
<LABEL>Pick a color:</LABEL>
<SELECT ID="i_color">
	<OPTION>Red</OPTION>
	<OPTION>Green</OPTION>
	<OPTION>Blue</OPTION>
</SELECT><BR>
<BUTTON ONCLICK="Send()">Send</BUTTON>
<BR><BR><STRONG>Response:</STRONG><BR>
<DIV ID="response">
	Not was pushed.
</DIV><SCRIPT SRC="post.js" TYPE="text/javascript"></SCRIPT>
							</DIV>
							<H2>Source files of the above example:</H2>
							<DIV>
								<H3>post.html</H3>
								<PRE NAME="code" CLASS="html">&lt;label>Name:&lt;/label>&lt;input id="i_name" name="name" />&lt;br />
&lt;label>Age:&lt;/label>&lt;input id="i_age" name="age" />&lt;br />
&lt;label>Pick a color:&lt;/label>
&lt;select id="i_color">
	&lt;option>Red&lt;/option>
	&lt;option>Green&lt;/option>
	&lt;option>Blue&lt;/option>
&lt;/select>&lt;br />
&lt;button onclick="Send()">Send&lt;/button>

&lt;br />&lt;br />&lt;strong>Response:&lt;/strong>&lt;br />
&lt;div id="response">
	Not was pushed.
&lt;/div></PRE>
							</DIV><DIV>
								<H3>post.js</H3>
								<PRE NAME="code" CLASS="js">var Send = function(){
	var req = new pi.xhr("post.php").
	environment.addData("name",pi.get("i_name").value).
	environment.addData("age",pi.get("i_age").value).
	environment.addData("color",pi.get("i_color").value).
	environment.addCallback([4],function(){
		pi.get("response").innerHTML=this.api.responseText;
	}).
	environment.setType("POST").
	send();
}</PRE>
							</DIV>
							<DIV>
								<DIV>
									<H3>post.php</H3>
									<PRE NAME="code" CLASS="php">&lt;?
 	print "Name: ".$_POST["name"];
 	print "&lt;br />Age: ".$_POST["age"];
 	print "&lt;br />Color: ".$_POST["color"];
?></PRE>
								</DIV>
							</DIV>
					</DIV>
				</DIV>
			</DIV>
		</DIV>
		<DIV CLASS="Clean"></DIV>
	</BODY> 
</HTML>